<template>
  <div class="equipment-alarm">
    <el-form
      class="form-container"
      label-width="90px"
      :size="size"
      :model="form"
      label-position="left"
      ref="form"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="监测点编码:" prop="monitorCode">
            <el-input
              style="width: 90%"
              v-model="form.code"
              placeholder="请输入"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="监测点名称:" prop="monitorName">
            <el-input
              style="width: 90%"
              v-model="form.name"
              placeholder="请输入"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="时间范围:" label-width="80px" prop="time">
            <el-date-picker
              v-model="form.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 90%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button :size="size" type="primary" @click="onSearch"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      :header-row-style="{ background: '#f2f2f2' }"
      id="table"
      :height="tableHeight || '280px'"
      border
      style="width: 100%"
      size="small"
    >
      <el-table-column
        v-for="item in tableHeaderColumn"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next, total" :total="1000">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "equipment-alarm",
  props: {
    tableHeight: {
      type: Number,
      default: 350,
    },
  },

  created() {},

  data() {
    return {
      size: "mini",
      form: {
        monitorCode: "",
        monitorName: "",
        time: "",
      },
      tableHeaderColumn: [
        { label: "序号", prop: "sn", width: 50 },
        { label: "监测点编码", prop: "monitorCode" },
        { label: "监测点名称", prop: "monitorName" },
        { label: "异常类型", prop: "errorType" },
        { label: "监测时间", prop: "voltage" },
        { label: "入库时间", prop: "voltageAlarm" },
        { label: "数据类型", prop: "powerWorkStatus", width: 100 },
        { label: "具体值", prop: "terminalAlarm", width: 100 },
      ],
      tableData: [
        { sn: 1 },
        { sn: 2 },
        { sn: 3 },
        { sn: 4 },
        { sn: 5 },
        { sn: 6 },
        { sn: 7 },
        { sn: 8 },
        { sn: 9 },
        { sn: 10 },
        { sn: 11 },
        { sn: 12 },
      ],
    };
  },

  methods: {
    onSearch() {},
  },
};
</script>

<style lang="scss" scoped>
// #6edef1
.equipment-alarm {
  padding: 15px;
  :deep {
    .el-input__inner {
      background-color: rgba(110, 224, 241, 0);
      border: 1px solid rgba(110, 224, 241, 1);
      border-radius: 15px;
      padding-right: 10px;
      font-size: 14px;
    }

    .el-range-input {
      background: rgba(110, 224, 241, 0);
    }

    .el-table__body {
      .el-table__cell {
        padding: 5px 0;
      }
    }

    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
      background-color: rgba(110, 224, 241, 0.4);
    }

    .el-table thead tr th {
      background: #efefef;
      color: #333;
      font-size: 14px;
    }

    .el-table thead {
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }

    .el-table--border th.el-table__cell.gutter:last-of-type {
      border: none;
    }

    .el-button--mini {
      padding: 6px 10px;
    }

    .el-form-item__label {
      color: #333;
    }
  }
  .el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    :deep {
      button {
        background: rgba(0, 0, 0, 0);
      }
      .btn-prev,
      .btn-next {
        background: rgba(0, 0, 0, 0);
        color: #02a7f0;
      }
      .el-pager li {
        background: rgba(0, 0, 0, 0);
        color: #333;
        font-size: 12px;
      }
      .el-pager li.active {
        color: #1890ff;
      }
      .el-pager li:hover {
        color: #1890ff;
      }

      button:disabled {
        color: #c0c4cc;
      }
    }
  }
}
</style>
